<!--
 * 首页
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 15275181688 / 19256078701 / 18754137913
 -->
<template>
    <view class="page-root">
        <button class="button" @tap="handleClick1">发送请求</button>
        <view class="tips">.then().catch().finally() 方式</view>
        <button class="button" @tap="handleClick2">发送请求</button>
        <view class="tips">await 方式</view>
        <button class="button" @tap="handleClick3">发送请求</button>
        <view class="tips">success、error、fail、complete 回调函数方式</view>
    </view>
</template>

<script setup>
    import { ref, computed } from "vue";
    import { onReady } from "@dcloudio/uni-app";
    import { apiQueryDemo } from "@/src/apis";
    import settings from "@/src/settings";

    // 该项目云端 Mock 功能开启了 Token 鉴权，请求参数需带上该 Token
    // 在这手动设置一下
    uni.setStorageSync(settings.apiStorageTokenKey, "hOPtrhaTMuuk4iR-8I5Do");

    // 接收页面参数
    const props = defineProps({
        // ...
    });

    // .then().catch().finally() 方式
    async function handleClick1() {
        apiQueryDemo({
            data: {
                id: 1
            },
            loadingTips: true,
            successTips: true,
            errorTips: true,
            failTips: true
        })
            .then((res) => {
                console.log("res1 ->", res);
            })
            .catch((err) => console.error(err))
            .finally(() => console.log("请求结束了"));
    }

    // await 方式
    async function handleClick2() {
        console.log("before await!");
        const res = await apiQueryDemo({
            data: {
                id: 1
            },
            loadingTips: true,
            successTips: true,
            errorTips: true,
            failTips: true
        });
        console.log("res2 ->", res);
        console.log("after await!");
    }

    // success、error、fail、complete 回调函数方式
    async function handleClick3() {
        const task = await apiQueryDemo({
            data: {
                id: 1
            },
            loadingTips: true,
            successTips: true,
            errorTips: true,
            failTips: true,
            success: (res) => {
                console.log("res3 ->", res);
            },
            error: (err) => console.error(err),
            fail: (err) => console.error(err),
            complete: () => console.log("请求结束了")
        });

        // 取消请求
        console.log("task ->", task);
        task.abort();
    }
</script>

<style lang="scss" scoped>
    .page-root {
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

    .button {
        border: none;
        width: 100%;
        font-size: 15px;
        padding: 15px;
        background: #1678ff;
        color: #ffffff;
        font-weight: bold;
        line-height: 1.5;

        &:active {
            opacity: 0.8;
        }
    }

    .tips {
        color: #888888;
        font-weight: bold;
        font-size: 13px;
        margin-top: 10px;
        margin-bottom: 50px;
    }
</style>
